<template>
	<div>
		<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="44"></el-table-column>
			<el-table-column prop="title" label="题干" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span class="cup" v-html="row.title" @click="handleEdit(row)"></span>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="题库名称" width="200" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span>{{ row.testQuestionBank.name }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="tags" label="试题标签" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="type" label="类型" width="100" :formatter="typeFilter"></el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template slot-scope="{ row }">
					<el-tag v-if="row.status == 1" size="small">正常</el-tag>
					<el-tag v-if="row.status == 2" size="small" type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="difficulty" label="难度" width="100">
				<template slot-scope="{ row }">
					<span>{{ difficultyFilter(row.difficulty) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="{ row }">
					<el-button-group>
						<el-button type="success" size="mini" @click="handleLook(row)">预览</el-button>
						<el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
					</el-button-group>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg">
				<el-empty :image-size="200"></el-empty>
			</div>
		</el-table>
		<Pagination v-show="parseInt(pageObj.count) > 0" :total="parseInt(pageObj.count)" @change="getList" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
		<QuestionPreview />
	</div>
</template>
<script>
import { qusetionType, qusetionDifficulty } from '../public/data';
export default {
	components: {
		QuestionPreview: () => import('../public/QuestionPreview.vue')
	},
	data() {
		return {
			qusetionType,
			qusetionDifficulty,
			listQuery: {
				page: 1,
				limit: 10
			},
			tableData: [],
			pageObj: {},
			checkedData: []
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshExamQuestion', (v) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
		this.$bus.$on('batchDeleteData', (v) => {
			if (this.checkedData.length > 0) {
				this.handleBatchDelete();
			} else {
				this.$message.warning('请先选择删除数据');
			}
		});
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('testSubjectsList', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
		},
		handleLook(row) {
			this.$bus.$emit('showDialogQuestionPreview', row);
		},
		handleEdit(row) {
			this.$store.commit('SET_ACTIVEROW', row);
			this.$store.commit('SET_ACTIVENAME', 'create');
		},
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		handleBatchDelete() {
			this.$confirm('确定要批量删除数据吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.batchDelete();
				})
				.catch(() => {});
		},
		async batchDelete() {
			let dataArr = this.checkedData.map((n) => n.id);
			await this.$store.dispatch('testSubjectsBatchDel', dataArr);
			this.getList();
		},
		async delete(row) {
			await this.$store.dispatch('testSubjectsDel', row);
			this.getList();
		},
		typeFilter(data) {
			let info = this.qusetionType.find((n) => n.value == data.type);
			return !info ? data.type : info.label;
		},
		difficultyFilter(type) {
			return this.qusetionDifficulty.filter((v) => v.value == type)[0].label;
		},

		handleSelectionChange(arr) {
			this.checkedData = [...arr];
		}
	}
};
</script>
